<template>

	
	
  <div class="vertical-nav">
    <ul class="nav-menu">
     
	  <template v-for="(item, index) in menuItems" :key="index">
	  <li 
        class="nav-item"
        :class="{ 'active': activeIndex === index }"
        @click="selectItem(index)"
      >
      <i :class="['menu-icon', item.icon]"></i>
		<!-- <el-icon><component :is="item.icon" /></el-icon> -->
        <span class="nav-text">{{ item.title }}</span>
      </li> 
	     <li
	            v-if="(index + 1) % 3 === 0 && index !== menuItems.length - 1"
	            class="abc"
	          ></li>
	  </template>
    </ul>
	<div class="wenzi">
	2025 © 抖音
	京ICP备16016397号-3
	icon京公网安备 11000002002046号
	广播电视节目制作经营许可证
	京B2-20170846
	网络文化许可证-京网文-（2025）0181-061号
	互联网宗教信息服务许可证 京（2022）0000057
	药品医疗器械网络信息服务备案 （京）网药械信息备字（2023）第00570号
	互联网新闻信息服务许可证 11220230001
	互联网新闻信息服务许可证 11220230001
	互联网新闻信息服务许可证 11220230001
	</div>
	<div>
		
		广告投放
		用户服务协议
		隐私政策
		账号找回
		联系我们
		加入我们
		营业执照
		友情链接
		站点地图
		下载抖音
		抖音电商
		
		
	</div>
	
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  Document,
  Menu as IconMenu,
  Setting,
  User
} from '@element-plus/icons-vue';

const activeIndex = ref(0);

const menuItems = ref([
	{ title: '精选', icon: 'icon-a1'},
	{ title: '推荐', icon: 'icon-a2' },
	{ title: 'AI搜索', icon: 'icon-a3' },
	{ title: '关注', icon: 'icon-a4' },
	{ title: '朋友', icon: 'icon-a5' },
	{ title: '我的', icon: 'icon-a6' },
	{ title: '直播', icon: 'icon-a7' },
	{ title: '放映厅', icon: 'icon-a8' },
	{ title: '短句', icon: 'icon-a9' }	 ,
	
]);

const selectItem = (index) => {
  activeIndex.value = index;
};
</script>

<style scoped>

.vertical-nav {
margin-top: 6vh;
  width: 10vw;
  background-color: rgb(22, 24, 35);
  border-radius: 8px;
  padding: 15px 0;
  
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  margin: 4px 8px;
  cursor: pointer;
  border-radius: 15px;
  transition: all 0.3s ease;
    filter: brightness(70%);
	width: 6vw;
}

.nav-item:hover {
/*  background-color: #e9ecef; */
   background: rgba(255, 255, 255, 0.2);
    filter: brightness(100%);

}

.nav-item.active {
/* background-color: #aaff00; */
  background: rgba(255, 255, 255, 0.2);
 color: white;
   filter: brightness(100%);
}

.nav-item.active:hover {
/*  background-color: #337ecc; */
  background: rgba(255, 255, 255, 0.2);
}

.el-icon {
  font-size: 18px;
  margin-right: 12px;
}

.nav-text {
  font-size: 16px;
  font-weight: 500;
  color: #ffff;
}


.wenzi{
	margin-top:10vh;
color: #ffff;
	filter: brightness(20%);
	  font-size: 12px;
	
}

	.cls-1 {
	  fill: #ff0050;
	}
	  
	.cls-2 {
	  fill: #fff;
	}
	  
	.cls-3 {
	  fill: none;
	}
	  
	.cls-4 {
	  fill: #00faf0;
	}
	  
	.cls-5 {
	  clip-path: url(#clippath);
	}

	.abc{
		    display: block;
		    height: 1px;
		    border-bottom: 1px solid rgba( 255,255,255 ,.04);
		    margin: 12px 24px 10px;
	}
	

	.menu-icon {
	 display: inline-block;
	 width: 24px;                                     /* 根据实际图标尺寸调整 */
	 height: 24px;
	 background-position:-0px 0px;
	 background-size:1104px auto;
	 background-image: url('../assets/nav1.png');            /* 替换为你的雪碧图路径 */
	 background-repeat: no-repeat;
	 margin-right: 8px;
	} 
	
	.icon-a1 { background-position: 0 0; }
	.icon-a2 { background-position: -72px 0; }
	/* style="background-position: -216px 0px; background-size: 1104px;" */
	.icon-a3 { background-position:  calc(72px*-2) 0; }
	.icon-a4 { background-position:  calc(72px*-3) 0; }
	.icon-a5 { background-position:  calc(72px*-4) 0; }
	.icon-a6 { background-position:  calc(72px*-5) 0; }
	.icon-a7 { background-position:  calc(72px*-6) 0; }
	.icon-a8 { background-position:  calc(72px*-7) 0; }
	.icon-a9 { background-position:  calc(72px*-8) 0; }
	
	



</style>